<template>
	<h1>订单数据表</h1>
  <div id="customerChart" style="width:1500px;height:500px;margin:auto;"></div>
</template>
<script>
//var username=window.sessionStorage.getItem('username');
import { inject, onMounted } from "vue";
import axios from 'axios';

// import { onMounted } from "vue";
import * as echarts from 'echarts'
export default {
  name: "data_page",
  setup() {
      let echarts = inject("ec");//引入
    onMounted(() => {//需要获取到element,所以是onMounted的Hook
      let myChart = echarts.init(document.getElementById("customerChart"));
      myChart.showLoading();
      var Das=[];
      var Cost=[];
      var username=window.sessionStorage.getItem('username');
      axios({
           method:'GET',
          url:"/order/VisualOrderVO/"+username,

      }).then(Response=>{
           console.log(Response.data.data[1]);
          for(var i=0;i<Response.data.data.length;i++){
             // Response.data.data[i].orderDate=String(Response.data.data[i].orderDate);
              Response.data.data[i].totalPrice=Number(Response.data.data[i].totalPrice);
              console.log(Response.data.data[i].orderDate);
              Das.push(Response.data.data[i].orderDate);
              Cost.push(Response.data.data[i].totalPrice);
          }

          console.log(Cost[1]);
           console.log(Das[1]);

           myChart.hideLoading();
             // 绘制图表
            myChart.setOption({
            title: { text: "支出" },
            tooltip: {},
            xAxis: {
                    data: Das//["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
                    },
            yAxis: {},
            series: [
             {
                name: "用户量",
                type: "line",
                data:Cost// [5, 20, 36, 10, 10, 20],
            },
            ],
        });
            window.onresize = function () {//自适应大小
                myChart.resize();
            };
      })
      // 绘制图表
      /* myChart.setOption({
        title: { text: "总用户量" },
        tooltip: {},
        xAxis: {
          data: ["12-3", "12-4", "12-5", "12-6", "12-7", "12-8"],
        },
        yAxis: {},
        series: [
          {
            name: "用户量",
            type: "line",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      }); */
     /*  window.onresize = function () {//自适应大小
        myChart.resize();
      }; */
    });
  },
  components: {},
  mounted() {},
};
</script>